window.addEventListener('load', function () {
  var al = document.querySelector('.al');
  var ar = document.querySelector('.ar');
  var content_r = document.querySelector('.content_r');
  var focusWidth = content_r.offsetWidth;//获取盒子的宽度
  //鼠标移动就会出现左右箭头
  content_r.addEventListener('mouseover', function () {
    al.style.display = 'block';
    ar.style.display = 'block';
    clearInterval(timer);
  })
  //鼠标移开就会消失左右箭头
  content_r.addEventListener('mouseleave', function () {
    al.style.display = 'none';
    ar.style.display = 'none';
    clearInterval(timer);
    timer = setInterval(function () {
      ar.click();
    }, 2000);
  })
  //点击点换图片的操作  
  var b = content_r.querySelector('.b');
  var ul = content_r.querySelector('ul');
  for (var i = 0; i < b.children.length; i++) {
    var li = document.createElement('li');
    li.setAttribute('index', i);//建立自定义属性
    ul.appendChild(li);
    //点击标点点时，会变白
    li.addEventListener('click', function () {
      for (var i = 0; i < ul.children.length; i++) {
        ul.children[i].className = '';
      }
      this.className = 'a';
      var index = this.getAttribute('index');
      num = index;
      circle = index;
      B(b, -index * focusWidth);
    })
  }
  ul.children[0].className = 'a';
  var num = 0;//图片在哪里
  var circle = 0;//点在哪里
  //复制第一张图片
  var first = b.children[0].cloneNode(true);
  b.appendChild(first);
  //右箭头点击事件
  var flag = true;
  ar.addEventListener('click', function () {
    if (flag) {
      flag = false;
      if (num == b.children.length - 1) {
        b.style.left = 0;
        num = 0;
      }
      num++;
      B(b, -num * focusWidth, function () {
        flag = true;
      });
      circle++;
      if (circle == ul.children.length) {
        circle = 0;
      }
      for (var i = 0; i < ul.children.length; i++) {
        ul.children[i].className = '';
      }
      ul.children[circle].className = 'a';
    }
  })
  //左箭头点击事件
  al.addEventListener('click', function () {
    if (flag) {
      flag = false;
      if (num == 0) {
        num = b.children.length - 1;
        b.style.left = -num * focusWidth + 'px';
      }
      num--;
      B(b, -num * focusWidth, function () {
        flag = true;
      });
      circle--;
      if (circle < 0) {
        circle = ul.children.length - 1;
      }
      for (var i = 0; i < ul.children.length; i++) {
        ul.children[i].className = '';
      }
      ul.children[circle].className = 'a';
    }
  })
  var timer = setInterval(function () {
    ar.click();
  }, 2000);
})